<script setup lang="ts" >
import { ref, onMounted} from 'vue';

const user = ref(JSON.parse(localStorage.getItem('happyuser') || '{}'));

const fileList = ref<any[]>([]); 

onMounted(() => {
  console.log('fileList is initialized:', fileList.value);
});
const handleFileUpload = (response: any, file: any) => {
  //fileList.value = fileList.value.map((item: any) => item.response.data)
  //fileList.value.push(response.data);
 
  console.log(1111111);
  console.log(1111111);
  console.log(response.data);
  console.log(response,file,fileList)
  console.log(file.response.data);
  fileList.value.push({ response });
}
const latestFileResponse = () => fileList.value[fileList.value.length - 1];
<<<<<<< HEAD
=======

>>>>>>> 1a7cbadc4c4776ea27180c3435334a4f9e10a7a6
</script>
<template>
     <div class="container">
        <el-card style="flex: 1;">
<<<<<<< HEAD
=======
          <div class="card" style="padding: 15px">
              您好，{{ user?.name ?? '游客' }}！欢迎使用本系统
          </div>
>>>>>>> 1a7cbadc4c4776ea27180c3435334a4f9e10a7a6
            <div  class="clearfix">
              <span style="font-weight: bold;">项目地址是https://gitee.com/Go_D_1994124137/element-plus-test</span>
            </div>
           <div>
             <div style="margin-top: 20px">
               <div style="margin: 10px 0"><strong>主题色</strong></div>
               <el-button type="primary">按钮</el-button>
               <el-button type="success">按钮</el-button>
               <el-button type="warning">按钮</el-button>
               <el-button type="danger">按钮</el-button>
               <el-button type="info">按钮</el-button>
             </div>
           </div>
          </el-card>
          <el-card style="flex: 1;">
            <div class="clearfix">
                 <span>文件上传下载测试</span>
            </div>
            <el-upload
               action="http://localhost:8082/file/upload"
               :headers="{ 'token': user.token }"
               :on-success="handleFileUpload">
               <template v-slot="scope">
                <!-- <div>{{ scope.file.response.data}}</div> -->
               <el-button  size="mini" type="primary">单文件上传</el-button>
               <el-image 
               v-if="latestFileResponse()?.response?.data"
              :src="latestFileResponse()?.response.data"
                style="width: 100px; height: 100px;">
               </el-image>
             </template>

            </el-upload>
        </el-card>
     </div>    
     
</template>

<style scoped>
.container {
  display: flex;
  justify-content: space-between; 
}
</style>